<template>
    <div class="progress">
        <span class="border_line"></span>
        <span class="orange"  :style="{width:progress}">
        </span>
    </div>
</template>
<script>
    export default{
        props:{
          progress:{
            type:String,
            default:'0%',
          }
        }
    }
</script>
<style lang="less" scoped>
    .progress {
        position:relative;
        width: 100%;
        height: 0.42rem;
        background: #fff;
      .border_line{
        display: inline-block;
        width: 100%;
        height: 100%;
       // border:1px solid #ccc;
        background: #e5e5e5;
        border-radius: 50px;

      }
    }

    .progress > .orange {
        position:absolute;
        float: left;
        top:0;
        left:0;
        height:100%;
        background: #b4da00;
        border-radius:50px;
        z-index: 1;
        //border:4px solid @red;
    }
</style>
